<template>
  <div id="editPerson">
    <a-card>
      <a-form
        id="editPersonForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        layout="horizontal"
        style="max-width: 600px"
      >
        <a-form-item label="昵称：">
          <a-input />
        </a-form-item>
        <a-form-item label="头像">
          <a-upload action="/upload.do" list-type="picture-card">
            <div>
              <PlusOutlined />
              <div style="margin-top: 8px">Upload</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="性别">
          <a-radio-group v-model:value="radioValue">
            <a-radio value="女">女</a-radio>
            <a-radio value="男">男</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="所在地区">
          <a-tree-select />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea :rows="4" />
        </a-form-item>
        <a-form-item label="兴趣">
          <a-select>
            <a-select-option value="demo">Demo</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="生日">
          <a-date-picker />
        </a-form-item>
        <a-form-item label="Github/Gitee">
          <a-input />
        </a-form-item>
        <a-form-item label="个人博客">
          <a-input />
        </a-form-item>
        <a-form-item label="学校">
          <a-select>
            <a-select-option value="demo">Demo</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="专业">
          <a-select>
            <a-select-option value="demo">Demo</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="学历">
          <a-select>
            <a-select-option value="demo">Demo</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="工作状态">
          <a-select>
            <a-select-option value="demo">Demo</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="公司">
          <a-input />
        </a-form-item>
        <a-form-item label="岗位">
          <a-input />
        </a-form-item>
        <a-form-item label="工作年限">
          <a-input-number />
        </a-form-item>
        <a-form-item>
          <a-button>提交</a-button>
        </a-form-item>
        <a-form-item>
          <a-button>取消</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { PlusOutlined } from "@ant-design/icons-vue";

const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 28 };
</script>

<style scoped>
#editPerson {
  width: 800px;
  margin: 0 auto;
  padding: 10px;
}

#editPersonForm {
}
</style>
